<template>
  <div class="search-pop">

    <search-head
      @needSearch="goSearch"
      :recomWord="recomWord"
      ></search-head>

    <template v-if="$route.name === 'searchPop'">
      <!-- 热搜栏 -->
      <list-container titleSize="small">
        <list-item 
          v-for="(item,index) in hotKeywordList" :key="index"
          @listClick="goSearch({keyword:item.keyword})">

          <template #left>
            {{index+1}}
          </template>

          {{item.keyword}}

          <van-tag type="warning" v-if="item.is_hot">热</van-tag>

        </list-item>
      </list-container>

      <!-- 历史栏 -->
      <history 
        @tagClick="goSearch"
        :historyKeywordList="historyKeywordList"></history>

    </template>

    <!-- 搜索页 -->
    <router-view 
      @needSearch="goSearch"
      :searchRes="searchRes" :keyword="keyword"></router-view>
    
  </div>
</template>

<script>
  import ListContainer from '@/components/ListContainer';
  import ListItem from '@/components/ListItem';
  import History from '@/components/History';
  import SearchHead from '@/components/SearchHead';

  export default {
    props: ['banner'],
    components: {
      ListContainer,
      ListItem,
      History,
      SearchHead
    },
    data() {
      return {
        keyword: "", // 搜索关键字
        recomWord:"", // 推荐搜索
        historyKeywordList:[], //历史记录
        hotKeywordList:[], // 热搜
        searchRes:[] // 搜索返回的数据
      }
    },
    async created () {
      const {data} = await this.$api.getSearchIndex();
      // 准备数据
      this.recomWord = data.defaultKeyword.keyword
      this.historyKeywordList = data.historyKeywordList;
      this.hotKeywordList = data.hotKeywordList;

    },
    methods: {
      //前往搜索页
      async goSearch(config){
        this.keyword = config.keyword
        console.log(config.keyword);
        // 请求搜索数据
        const res = await this.$api.searchByKeyword(config)
        console.log(res);
        this.searchRes = res.data
        this.$router.push("/home/searchPop/searchPage")
      }
    }
  }
</script>

<style scoped>
  a{
    color: black;
  }
  .search-pop{
    background-color: rgb(252,252,252);
    position: absolute;
    left: 0;
    top:0 ;
    right: 0;
    bottom: 0;
  }
  .van-tag{
    margin: 0 .04rem;
    font-size: .1rem;
  }

</style>